// var data = [ //地图上展示的数据和内容
//     {
//         name: '新疆',
//         value: 26,
//     },
//     {
//         name: '西藏',
//         value: 2,
//     },
//     {
//         name: '黑龙江',
//         value: 25
//     },
//     {
//         name: '吉林',
//         value: 27
//     },
//     {
//         name: '辽宁',
//         value: 62
//     },
//     {
//         name: '内蒙古',
//         value: 45
//     },
//     {
//         name: '北京',
//         value: 5
//     },
//     {
//         name: '宁夏',
//         value: 18
//     },
//     {
//         name: '山西',
//         value: 73
//     },
//     {
//         name: '河北',
//         value: 98
//     },
//     {
//         name: '天津',
//         value: 15
//     },
//     {
//         name: '青海',
//         value: 4
//     },
//     {
//         name: '甘肃',
//         value: 29
//     },
//     {
//         name: '山东',
//         value: 117
//     },
//     {
//         name: '陕西',
//         value: 73
//     },
//     {
//         name: '河南',
//         value: 113
//     },
//     {
//         name: '安徽',
//         value: 106
//     },
//     {
//         name: '江苏',
//         value: 110
//     },
//     {
//         name: '上海',
//         value: 10
//     },
//     {
//         name: '四川',
//         value: 109
//     },
//     {
//         name: '湖北',
//         value: 98
//     },
//     {
//         name: '浙江',
//         value: 113
//     },
//     {
//         name: '重庆',
//         value: 38
//     },
//     {
//         name: '湖南',
//         value: 121
//     },
//     {
//         name: '江西',
//         value: 116
//     },
//     {
//         name: '贵州',
//         value: 88
//     },
//     {
//         name: '福建',
//         value: 83
//     },
//     {
//         name: '云南',
//         value: 53
//     },
//     {
//         name: '广西',
//         value: 87
//     },
//     {
//         name: '广东',
//         value: 85
//     },
//     {
//         name: '海南',
//         value: 7
//     },

// ];
// var geoCoordMap = { //定义自定义图标放置的位置

//     '新疆': [86.61, 40.79],
//     '西藏': [89.13, 30.66],
//     '黑龙江': [128.34, 47.05],
//     '吉林': [126.32, 43.38],
//     '辽宁': [123.42, 41.29],
//     '内蒙古': [112.17, 42.81],
//     '北京': [116.60, 40.40],
//     '宁夏': [106.27, 36.76],
//     '山西': [111.95, 37.65],
//     '河北': [115.21, 38.44],
//     '天津': [117.64, 39.52],
//     '青海': [97.07, 35.62],
//     '甘肃': [103.82, 36.05],
//     '山东': [118.01, 36.37],
//     '陕西': [108.94, 34.46],
//     '河南': [113.46, 34.25],
//     '安徽': [117.28, 31.86],
//     '江苏': [120.26, 32.54],
//     '上海': [121.46, 31.28],
//     '四川': [103.36, 30.65],
//     '湖北': [112.29, 30.98],
//     '浙江': [120.15, 29.28],
//     '重庆': [107.51, 29.63],
//     '湖南': [112.08, 27.79],
//     '江西': [115.89, 27.97],
//     '贵州': [106.91, 26.67],
//     '福建': [118.31, 26.07],
//     '云南': [101.71, 24.84],
//     '广西': [108.67, 23.68],
//     '广东': [113.98, 22.82],
//     '海南': [110.03, 19.33],
// };

// var convertData = function (data) {
//     var res = [];
//     for (var i = 0; i < data.length; i++) {
//         var geoCoord = geoCoordMap[data[i].name];
//         if (geoCoord) {
//             res.push({
//                 name: data[i].name,
//                 value: geoCoord.concat(data[i].value),

//             });
//         }
//     }
//     console.log(res)
//     return res;
// };

// fn();
// 生成柱状图
// function fn() {
//     //二次重绘前清空图表
//     var main = document.getElementById('geo');
//     var existInstance = echarts.getInstanceByDom(main);
//     if (existInstance) {
//         if (true) {
//             echarts.dispose(existInstance);
//         }
//     }
//     // 基于准备好的dom，初始化echarts实例
//     var myChart = echarts.init(document.getElementById('geo'));
//     // 指定图表的配置项和数据
//     var option = {
//         backgroundColor: '#080a20',
//         tooltip: {
//             trigger: 'item',
//             // 这里移入显示的内容是data数据里面的value值  需要变动自己改
//             formatter: function (params) { //配置显示内容
//                 if (typeof (params.value)[2] == "undefined")
//                     return params.name + '门店数量：' + "0";
//                 else
//                     return params.name + '门店数量：' + params.value[2];
//             }
//         },
//         //地图小圆点
//         legend: {
//             orient: 'vertical',
//             x: 'left',
//         },
//         roamController: {
//             show: true,
//             x: 'right',
//             mapTypeControl: {
//                 'china': true
//             }
//         },
//         geo: {
//             zlevel: 0, //geo显示级别，默认是0		 
//             map: 'china',
//             zoom: 1.24,
//             scaleLimit: { //滚轮缩放的极限控制
//                 min: 1,
//                 max: 6
//             },
//             label: {
//                 normal: {
//                     show: true,
//                     textStyle: {
//                         fontSize: 12,
//                         color: "#4DFFFD"
//                     } //省份标签字体颜色
//                 },
//                 emphasis: {
//                     show: true,
//                     textStyle: {
//                         color: "#d89b19",  //地图划过 省会文字颜色
//                     }
//                 }
//             },
//             roam: true,
//             itemStyle: {
//                 normal: { // 默认状态下地图的文字
//                     label: { show: true },
//                     // borderWidth: 0.3, //区域边框宽度
//                     areaColor: '#142957',  // 地图区域背景颜色
//                     borderColor: '#0692a4',  // 地图区域边框颜色
//                 },
//                 emphasis: {
//                     label: { show: true },
//                     areaColor: '#0b1c2d',  //划过地图区域背景颜色
//                 }
//             },

//         },

//         series: [{

//             type: 'scatter',
//             roam: true,
//             symbol: 'image://./images/flag.png',
//             symbolSize: 22,
//             coordinateSystem: 'geo',
//             data: convertData(data),
//             label: {
//                 /*  normal: {
//                      formatter: '{b}',
//                      position: 'right',
//                      show: false
//                  }, */
//                 emphasis: {
//                     show: false
//                 }
//             },
//         }

//         ]
//     };

//     // 使用刚指定的配置项和数据显示图表。
//     myChart.setOption(option);

// }



// 带颜色中国地图
var data = [];
var appkey = "adtec+4245";
var timestamp = Math.round(new Date() / 1000);
const DataScreenToken = hex_md5("dataScreenToken" + appkey).toString();
const requestUrl = "http://fsilon.dderp.cn:10082/query";
(function () {
    mapSource(requestUrl, 'JJ8019', DataScreenToken, 'existence')
})();
$('#existence').click(function () {
    mapSource(requestUrl, 'JJ8019', DataScreenToken, 'existence')

})
$('#blank').click(function () {
    mapSource(requestUrl, 'JJ8021', DataScreenToken, 'blank')

})
//定时器
var index = 0;
var timer = setInterval(function () {
    index++;
    if (index > 2) {
        index = 0;
    };
    $('.map h3 a').eq(index).click();
    if (index == 1) {
        mapSource(requestUrl, 'JJ8019', DataScreenToken, 'existence')
    } else {
        mapSource(requestUrl, 'JJ8021', DataScreenToken, 'blank')
    }
}, 120000);
function mapSource(requestUrl, proname, DataScreenToken, type) {
    $.ajax({
        url: requestUrl,
        type: "GET",
        dataType: "json",
        data: {
            proname: proname
        },
        headers: { DataScreenToken: DataScreenToken },
        success: function (res) {
            data = res.rows;
            console.log(data)
            //定义自定义图标放置的位置
            var geoCoordMap = {
                '新疆': [86.61, 40.79],
                '西藏': [89.13, 30.66],
                '黑龙江': [128.34, 47.05],
                '吉林': [126.32, 43.38],
                '辽宁': [123.42, 41.29],
                '内蒙古': [112.17, 42.81],
                '北京': [116.60, 40.40],
                '宁夏': [106.27, 36.76],
                '山西': [111.95, 37.65],
                '河北': [115.21, 38.44],
                '天津': [117.64, 39.52],
                '青海': [97.07, 35.62],
                '甘肃': [103.82, 36.05],
                '山东': [118.01, 36.37],
                '陕西': [108.94, 34.46],
                '河南': [113.46, 34.25],
                '安徽': [117.28, 31.86],
                '江苏': [120.26, 32.54],
                '上海': [121.46, 31.28],
                '四川': [103.36, 30.65],
                '湖北': [112.29, 30.98],
                '浙江': [120.15, 29.28],
                '重庆': [107.51, 29.63],
                '湖南': [112.08, 27.79],
                '江西': [115.89, 27.97],
                '贵州': [106.91, 26.67],
                '福建': [118.31, 26.07],
                '云南': [101.71, 24.84],
                '广西': [108.67, 23.68],
                '广东': [113.98, 22.82],
                '海南': [110.03, 19.33],
            };

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                            sjbm: data[i].sjbm
                        });
                    }
                }
                return res;
            };

            var result = fn();
            //生成柱状图
            function fn() {
                //二次重绘前清空图表
                var main = document.getElementById('geo');
                var existInstance = echarts.getInstanceByDom(main);
                if (existInstance) {
                    if (true) {
                        echarts.dispose(existInstance);
                    }
                }
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('geo'));
                // 指定图表的配置项和数据
                var option = {
                    backgroundColor: '#080a20',
                    // title: {
                    //     text: '全国地图大数据',
                    //     subtext: '',
                    //     x: 'center'
                    // },
                    tooltip: {
                        trigger: 'item',
                        // 这里移入显示的内容是data数据里面的value值  需要变动自己改
                        formatter: function (params) { //配置显示内容
                            if (typeof (params.value)[2] == "undefined") {
                                if (isNaN(params.value)) {
                                    return params.name + '门店数量：' + 0;
                                }
                                return params.name + '门店数量：' + params.value;
                            } else {
                                return params.name + '门店数量：' + params.value[2];
                            }

                            // console.log(params)
                        },
                    },
                    //数据范围
                    dataRange: {
                        show: false,
                        // splitList: signList,
                        // orient: 'horizontal',
                        min: 0,
                        max: 150,
                        color: ['#0B1C2D', '#68D8FE'],
                        // color: ['#142957', '#6495ED'],
                        text: ['高', '低'],
                        splitNumber: 0,
                        textStyle: {
                            color: "#FFFFFF",  //数据范围文字颜色
                            fontSize: "100%",
                        }
                    },

                    //地图小圆点
                    // legend: {
                    //     orient: 'vertical',
                    //     x: 'left',
                    // },
                    roamController: {
                        show: true,
                        x: 'right',
                        mapTypeControl: {
                            'china': true
                        }
                    },

                    //左侧小导航图标
                    // visualMap: {
                    //     show: true,
                    //     x: 'left',
                    //     y: 'center',
                    //     splitList: [
                    //         { start: 500, end: 600 }, { start: 400, end: 500 },
                    //         { start: 300, end: 400 }, { start: 200, end: 300 },
                    //         { start: 100, end: 200 }, { start: 0, end: 100 },
                    //     ],
                    //     color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
                    // },

                    geo: {
                        zlevel: 0, //geo显示级别，默认是0		 
                        map: 'china',
                        zoom: 1.24,
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 6
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: '100%',
                                    // color: "#B23AEE"
                                    color: "#01F7F9"
                                } //省份标签字体颜色
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    color: "#FFFFFF",  //地图划过 省会文字颜色
                                }
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: { // 默认状态下地图的文字
                                label: { show: true },
                                // borderWidth: 0.3, //区域边框宽度
                                areaColor: '#142957',  // 地图区域背景颜色
                                // borderColor: '#0692a4',  // 地图区域边框颜色
                            },
                            emphasis: {
                                label: { show: true },
                                areaColor: '#FE994E',  //划过地图区域背景颜色
                            }
                        },

                    },

                    //配置属性
                    series: [
                        {
                            type: 'scatter',
                            roam: true,
                            // symbol: 'image://./images/flag.png',
                            symbolSize: 22,
                            coordinateSystem: 'geo',
                            // data: convertData(data),
                            label: {
                                /*  normal: {
                                     formatter: '{b}',
                                     position: 'right',
                                     show: false
                                 }, */
                                emphasis: {
                                    show: false
                                }
                            },
                        },
                        {
                            name: '门店数量',
                            type: 'map',
                            mapType: 'china',
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '100%',
                                        color: "#FFFFFF"
                                        // color: "#01F7F9"
                                    } //省份标签字体颜色
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        color: "#FFFFFF",  //地图划过 省会文字颜色
                                    }
                                }
                            },
                            zoom: 1.24, //地图放大
                            roam: true, //开启地图滚轮缩放
                            scaleLimit: { //滚轮缩放的极限控制
                                min: 1,
                                max: 6
                            },
                            itemStyle: {
                                normal: {
                                    label: { show: true },
                                    // borderWidth: 0.3, //区域边框宽度
                                    // areaColor: '#142957',  // 地图区域背景颜色
                                    // borderColor: '#0692a4',  // 地图区域边框颜色
                                },
                                emphasis: {
                                    label: { show: true },
                                    areaColor: '#FE994E' //划过地图区域背景颜色
                                },

                            },
                            data: data
                        },

                    ]
                };

                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                myChart.on('georoam', function (params) {
                    var option = myChart.getOption();//获得option对象
                    console.log(params, option)
                    if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
                        option.geo[0].zoom = option.series[1].zoom;//下层geo的缩放等级跟着上层的geo一起改变
                        option.geo[0].center = option.series[1].center;//下层的geo的中心位置随着上层geo一起改变
                    } else {//捕捉到拖曳时
                        option.geo[0].center = option.series[1].center;//下层的geo的中心位置随着上层geo一起改变
                    }
                    myChart.setOption(option);//设置option
                });
                if (type == 'existence') {
                    myChart.on('click', function (params) {//点击事件
                        if (params.componentType === 'series') {
                            $('#mapData2').html('')
                            $('#mapData2').append(
                                `
                                    <tr style="height: 1.5rem;">
                                        <th>品牌</th>
                                        <th>所属区域</th>
                                        <th>客户代号</th>
                                        <th>客户名称</th>
                                        <th>联系人</th>
                                        <th>联系电话</th>
                                        <th>区域经理</th>
                                        <th>评级</th>
                                        <th>状态</th>
                                        <th>是否德尚客户</th>
                                     </tr>
                                `)

                            // var provinceName = params.name;
                            $('#box').css('display', 'block');
                            // $("#box-title").html(provinceName);
                            var sjbm = params.data.sjbm;
                            $.ajax({
                                url: url,
                                type: "GET",
                                dataType: "json",
                                data: {
                                    proname: 'JJ8020',
                                    sjbm: sjbm
                                },
                                headers: { DataScreenToken: sign },
                                success: function (res) {
                                    res.rows.forEach(item => {
                                        $('#mapData2').append(`
                                           <tr  style="height: 1.5rem;">
                                        <td>${item.brand_code}</td>
                                        <td>${item.片区}</td>
                                        <td>${item.编码}</td>
                                        <td>${item.名称}</td>
                                        <td>${item.联系人}</td>
                                        <td>${item.电话}</td>
                                        <td>${item.区域经理}</td>
                                        <td>${item.评级}</td>
                                        <td>${item.open_flag}</td>
                                        <td>${item.是否德尚客户}</td>
                                    </tr>`)
                                    });
                                }
                            })
                        }
                    });
                } else {
                    myChart.on('click', function (params) {//点击事件
                        if (params.componentType === 'series') {
                            $('#mapData2').html('')
                            $('#mapData2').append(
                                `
                                 <tr style="height: 1.666667rem;color:"#000000;font-weight: bold;font-size:14px;">
                                        <th>省份</th>
                                        <th>市区</th>
                                        <th>县区</th>
                                        <th>门店数量</th>
                                     </tr>
                                `)

                            // var provinceName = params.name;
                            $('#box').css('display', 'block');
                            // $("#box-title").html(provinceName);
                            var name = params.data.name;
                            $.ajax({
                                url: url,
                                type: "GET",
                                dataType: "json",
                                data: {
                                    proname: 'JJ8022',
                                    prov: name
                                },
                                headers: { DataScreenToken: sign },
                                success: function (res) {
                                    res.rows.forEach(item => {
                                        $('#mapData2').append(`  <tr  style="height: 1.5rem;">
                                        <td>${item.prov}</td>
                                        <td>${item.city}</td>
                                        <td>${item.county}</td>
                                        <td>${item.sl}</td>
                                    </tr>`)
                                    });
                                }
                            })
                        }
                    });
                }


            }

        }
    })

}
